<template>
	<view v-if="isWx" class="open"></view>
	<view class="text" v-else>
		<image src="https://sunacliving.sunac.com.cn/sys/adminStyles/images/dowLogo.png" style="width: 238rpx;height: 272rpx;"></image>
		<view style="margin-top: 100rpx;">如果浏览器打开失败，请移步到桌面直接打开应用</view>
	</view>
</template>

<script>
export default {
	onLoad(params) {
		this.callbackUrl = params.callbackUrl;
	},
	data() {
		const info = uni.getSystemInfoSync();
		return {
			callbackUrl: '',
			isWx: this.isWeixin(),
			isIOS: info.platform === 'ios',
			isAndroid: info.platform === 'android'
		};
	},
	mounted() {
		if (!this.isWx) {
			this.redirect();
		}
	},
	methods: {
		isWeixin() {
			var ua = navigator.userAgent.toLowerCase();
			if (ua.match(/MicroMessenger/i) == 'micromessenger') {
				return true;
			} else {
				return false;
			}
		},
		openApp() {
			const { callbackUrl, isIOS, isAndroid } = this;

			let platformUrl = 'androidrongchuangapp://go_my_page';

			const a = document.createElement('a');
			a.href = `${platformUrl}?callbackUrl=${decodeURIComponent(callbackUrl)}`;
			document.body.appendChild(a);
			a.click();
		},
		redirect() {
			const { isIOS, isAndroid } = this;
			const t0 = new Date().getTime();
			this.openApp();
			//由于打开需要1～2秒，利用这个时间差来处理－－打开app后，返回h5页面会出现页面变成app下载页面，影响用户体验
			const delay = setInterval(() => {
				const t1 = new Date().getTime();
				if (t1 - t0 < 4500 && t1 - t0 > 3500) {
					this.download();
				}
				if (t1 - t0 >= 5000) {
					clearInterval(delay);
				}
			}, 1000);
		},
		download() {
			const { isIOS, isAndroid } = this;
			if (isIOS) {
				window.location.href = 'https://sunacliving.sunac.com.cn/sys/wap/version/download?channel=KHFX';
			}
			if (isAndroid) {
				window.location.href = 'https://sunacliving.sunac.com.cn/sys/wap/version/download?channel=KHFX';
			}
		}
	}
};
</script>

<style scoped lang="less">
	.open {
		background: url(https://mall-rongchuang.oss-cn-beijing.aliyuncs.com/guixin_miniProgram/img/browser-open.png) center center no-repeat;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-size: 525rpx 245rpx;
		background-color: rgba(0,0,0,0.5);
		background-position: center 20rpx;
	}
	.text {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		color: #66645D;
		padding: 200rpx 0;
		text-align: center;
		font-size: 24rpx;
	}
</style>
